<template>
  <a-layout class="page-configuration">
    <a-layout-header>
      <a-page-header
        class="page-header"
        title="页面配置"
        sub-title="可以配置和预览页面"
        @back="() => $router.replace('/page-manage')"
      />
    </a-layout-header>
    <a-layout>
      <!-- 页面配置总览 -->
      <a-layout-sider width="450">
        <!-- 基础信息 -->
        <div class="page-base-info m-descriptions">
          <h2 class="m-descriptions-title"><a-avatar class="avatar" :src="data.logoPath" />{{ data.pageName }}</h2>
          <div class="m-descriptions-item">
            <span class="m-descriptions-label">所属母版：</span>
            <p class="m-descriptions-text">
              <a-tag color="blue">{{ data.templateName }}</a-tag>
            </p>
          </div>
          <div class="m-descriptions-item" v-if="data.pageDescribe">
            <span class="m-descriptions-label">页面描述：</span>
            <p class="m-descriptions-text">{{ data.pageDescribe }}</p>
          </div>
        </div>
        <!-- 页面配置信息 -->
        <div class="page-config-box">
          <a-collapse v-model:activeKey="activeKey" ghost>
            <a-collapse-panel v-for="item in collapseConfig" :key="item.key" :header="item.value">
              <component ref="infoComponent" :is="item.component" :data="data" />
            </a-collapse-panel>
          </a-collapse>
        </div>
        <!-- 操作按钮 -->
        <div class="page-btn">
          <a-button type="primary" @click="handleSave">保存</a-button>
        </div>
      </a-layout-sider>
      <!-- 页面预览 -->
      <a-layout-content>
        <page-preview ref="pagePreview" :url="previewUrl" />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import pageApi from '@/api/management/page'
import BaseInfo from './components/BaseInfo'
import HeaderInfo from './components/HeaderInfo'
import LayoutInfo from './components/LayoutInfo'
import PagePreview from './components/PagePreview.vue'
/**
 * 页面配置
 * @author 朱琦
 * @date   时间：2023/1//30
 */

//  默认的页面配置参数
const defaultPageConfig = {
  // header: {},
  layout: {}
}
export default {
  name: 'PageConfiguration',
  components: { BaseInfo, HeaderInfo, LayoutInfo, PagePreview },
  data() {
    return {
      data: {},
      pageConfig: {},
      collapseConfig: [
        {
          key: 'base',
          component: 'BaseInfo',
          value: 'Base 基础信息'
        },
        {
          key: 'header',
          component: 'HeaderInfo',
          value: 'Header 头部信息'
        },
        {
          key: 'layout',
          component: 'LayoutInfo',
          value: 'Layout 布局信息'
        }
      ],
      activeKey: ['base', 'header', 'layout'],
      routePrefix: window.location.origin + process.env.BASE_URL
    }
  },
  computed: {
    id() {
      return this.$route.params.id
    },
    previewUrl() {
      return this.routePrefix + `mother-set/${this.data.pageStatus}/${this.data.id}`
    }
  },
  created() {},
  mounted() {
    this.getData()
  },
  methods: {
    /**
     * 获取页面详情
     */
    getData() {
      pageApi.getPageDetail(this.id).then(res => {
        this.data = res.data
        this.pageConfig = { ...defaultPageConfig, ...JSON.parse(res.data.pageConfig) }
        this.callInfoComponent('setForm')
      })
    },
    /**
     * 调用 infoComponent 方法
     * @param {String} method 方法名  setForm: 设置表单数据   getForm：获取表单数据
     * @param {Object} data 数据
     */
    callInfoComponent(method, data = this.pageConfig) {
      this.$refs.infoComponent.forEach(component => {
        component[method] && component[method](data)
      })
    },
    /**
     * 点击保存
     */
    handleSave() {
      this.callInfoComponent('getForm')
      // console.log('page-config:', this.pageConfig)
      // return
      const params = {
        id: this.data.id,
        pageConfig: JSON.stringify(this.pageConfig)
      }
      pageApi.setPage(params).then(res => {
        this.$message.success('页面配置修改成功')

        this.$refs.pagePreview.reload()
      })
    }
  }
}
</script>

<style scoped lang="less">
.page-configuration {
  .ant-layout-header {
    height: auto;
  }
  .page-header {
    /deep/.ant-page-header-heading {
      .ant-page-header-back-button,
      .ant-page-header-heading-title {
        color: #fff;
      }
      .ant-page-header-heading-sub-title {
        color: rgba(255, 255, 255, 0.45);
      }
    }
  }
  .ant-layout-sider {
    background: #fff;
    /deep/.ant-layout-sider-children {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .page-base-info {
      flex-shrink: 0;
      padding: 10px 20px 0;

      box-shadow: 0 0 10px 0 rgba(204, 204, 204, 0.4);
      .avatar {
        margin-right: 10px;
      }
    }

    .page-config-box {
      overflow: auto;
      flex: 1;
      // padding: 10px;
      /deep/.ant-collapse-header {
        // font-size: 16px;
      }
    }

    .page-btn {
      padding: 10px;
      flex-shrink: 0;
      text-align: right;
      // position: absolute;
    }
  }
  .ant-layout-content {
    padding: 10px;
  }
}
</style>
